<template>
  <div>
    <el-card>
      <div slot="header" style="font-size: 20px; font-weight: 600">
        平台数据
      </div>
      <div>
        <div style="width: 1300px; height: 500px" ref="chart" id="np666"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      queryInfo: {
        clubname: ""
      },
      currentPage: 1,
      total: 0,
      currentPageSize: 10,
      studentList: [],
      formLabelWidth: "120",
      userType: "",
      clubTypes: [],
      clubMgrProfile: {},
      nowClubId: "",
      nowClubName: "",
      tableLoading: false,
      charts: "",
      dates: [],
      datas: [],
      opinionData: ["155", "400", "900", "800", "300", "900", "270"] //数据
    };
  },
  created() {
    this.getDataSet();
  },
  mounted() {
    // this.initCharts();
    this.drawLine("np666");
  },
  methods: {
    initCharts() {
      console.log(this.$echart);
      let myChart = echarts.init(this.$refs.chart);
      console.log(this.$refs.chart); // 绘制图表
      myChart.setOption({
        title: { text: "在Vue中使用echarts" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    },

    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      console.log(this.dates);
      console.log(this.datas);
      this.charts.setOption({
        title: {
          left: "3%",
          top: "5%",
          text: "近14天用户量变化" //标题文本，支持使用 \n 换行。
        },
        tooltip: {
          trigger: "axis"
        },
        // legend: {
        //   align: "right", //文字在前图标在后
        //   left: "3%",
        //   top: "15%",
        //   data: ["近一周"]
        // },
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true
        },

        toolbox: {
          feature: {
            saveAsImage: {} //保存为图片
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true //保证刻度线和标签对齐
          },
          // data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] //x坐标的名称
          data: this.dates //x坐标的名称
        },
        yAxis: {
          type: "value",
          boundaryGap: true
          // splitNumber: 4, //纵坐标数
          // interval: 50 //强制设置坐标轴分割间隔
        },

        series: [
          {
            name: "用户量",
            type: "line", //折线图line;柱形图bar;饼图pie
            stack: "总量",
            areaStyle: {
              //显示区域颜色---渐变效果
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#409eff" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            itemStyle: {
              color: "#409eff", //改变折线点的颜色
              lineStyle: {
                color: "#409eff" //改变折线颜色
              }
            },
            // data: this.opinionData
            data: this.datas
          }
        ]
      });
    },

    async getDataSet() {
      const { data: res } = await this.$http({
        url: "/smtpmail/user/statistics",
        method: "get"
      });
      if (res.code === 20000) {
        let date = new Date().getTime();
        let date1 = new Date(date);
        console.log(date1.getMonth() + 1 + " " + date1.getDate());
        console.log(res);
        for (let index = 0; index < res.data.list.length; index++) {
          const element = res.data.list[index];
          let date2 = new Date(date1 - 24 * 60 * 60 * 1000 * index);
          console.log(date2);
          let date = date2.getMonth() + 1 + "月" + date2.getDate() + "日";
          this.dates.push(date);
          let str = new String(element.count);

          this.datas.push(str.toString());
        }
        this.dates = this.dates.reverse();
        this.datas = this.datas.reverse();
        console.log(this.dates);

        console.log(this.datas);
        this.drawLine("np666");
      }
    },

    async exportStudent() {
      await this.$http({
        url: `xssf/${this.nowClubId}`,
        method: "post",
        responseType: "blob"
      })
        .then((res) => {
          if (res.status !== 200) {
            return this.$message.error("获取资源失败!");
          }

          // 前提是服务端要在header设置Access-Control-Expose-Headers: Content-Disposition
          // 前端才能正常获取到Content-Disposition内容
          const disposition = res.headers["content-disposition"];
          let fileName = String(disposition).substring(
            String(disposition).indexOf("filename=") + 9,
            String(disposition).length
          );
          // iso8859-1的字符转换成中文
          fileName = decodeURI(escape(fileName));
          // 去掉双引号
          fileName = fileName.replace(/\"/g, "");
          const content = res.data;
          // 创建a标签并点击， 即触发下载
          let url = window.URL.createObjectURL(new Blob([content]));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", fileName);
          //link.download = "测试下载文件.xls"
          // 模拟
          document.body.appendChild(link);
          link.click();
          // 释放URL 对象
          window.URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
};
</script>


<style lang="less" scoped>
.pagination_wrapper {
  margin-top: 20px;
  margin-right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>